<template>
  <!-- 分类路由 -->
  <div>
    <back-top></back-top>
    <van-nav-bar title="专题商品" left-arrow @click-left="$router.back()" />
    <!-- tabs区域 -->
    <van-tabs v-model="active" @click="tabsClick">
      <van-tab
        v-for="item in brotherCategory"
        :name="item.id + ''"
        :key="item.id"
        :title="item.name"
      ></van-tab>
    </van-tabs>
    <!-- 内容区域 -->
    <div class="title">
      <p class="name">{{ currentCategory.name }}</p>
      <p class="desc">{{ currentCategory.front_desc }}</p>
    </div>
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      :finished-text="list.length <= 0 ? '暂无数据' : '我也是有底线的!'"
      @load="onLoad"
    >
      <goods-list
        :list="list"
        @gotoDetails="(v) => $router.push(`/details/${v}`)"
      ></goods-list>
    </van-list>
  </div>
</template>

<script>
import { getCategoryList, getCategoryGoodsList } from '@/api/home'
export default {
  props: ['id'],
  data () {
    return {
      active: '',
      brotherCategory: [],
      currentCategory: {},
      mapQuery: {
        page: 1,
        size: 20,
        categoryId: this.id
      },
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    // 获取tabs 列表
    async getChanelList (id) {
      this.active = id
      const res = await getCategoryList({ id: id })
      this.brotherCategory = res.data.brotherCategory
      this.currentCategory = res.data.currentCategory
      this.onLoad()
    },
    // tabs切换
    tabsClick (val) {
      this.mapQuery.page = 1
      this.mapQuery.categoryId = val
      this.list = []
      this.getChanelList(this.mapQuery.categoryId)
    },
    // list组件的onload事件
    async onLoad () {
      const res = await getCategoryGoodsList(this.mapQuery)
      this.list = [...this.list, ...res.data.goodsList]
      if (this.mapQuery.page > res.data.totalPages) {
        this.finished = true
      }
      this.loading = false
      this.mapQuery.page += 1
    }
  },
  created () {
    this.getChanelList(this.mapQuery.categoryId)
  }
}
</script>

<style scoped lang='less'>
/deep/.van-nav-bar {
  background-color: @red;
  .van-nav-bar__title {
    color: #fff !important;
  }
  .van-icon {
    color: #fff;
  }
}
.title {
  width: 100%;
  text-align: center;
  .name {
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.2rem;
  }
  .desc {
    height: 0.3rem;
    line-height: 0.3rem;
    color: black;
  }
}
</style>
